<html>
   <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script type="text/javascript" src="/js/donetyping.js"></script>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript" src="/js/maps.js"></script>
      
   </head>
   <body onload="initialize(21.027764,105.834160)">
      <style>
         #mapCanvas {
         width: 500px;
         height: 400px;
         float: left;
         }
         #infoPanel {
         float: left;
         margin-left: 10px;
         }
         #infoPanel div {
         margin-bottom: 5px;
         }
      </style>
      <div id="mapCanvas"></div>
      
      <div id="infoPanel">
         <input type="text" id="address_input" value="Hà Nội" />
         <b>Marker status:</b>
         <div id="markerStatus"><i>Click and drag the marker.</i></div>
         <b>Current position:</b>
         <div id="info"></div>
         <b>Closest matching address:</b>
         <div id="address"></div>
      </div>
      <script>
         $(document).ready(function(){
            $('#address_input').donetyping(function(){
               //e.preventDefault();
               var $this = $(this);
               var address =  $this.val();
               maptoAddress(address);
               $("#address").text(address);
            });
         })
      </script>
   </body>
</html>